<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Excel用例上传</title>
</head>
<body>
    <div class="container">
        <div class="float-left">
            <h1>Excel用例上传至Blade平台</h1>
            <h3>要求用例必须是从blade上导出的模板，存在流水号</h3>
            <h3>上传后会自动绑定脚本和测试数据并将其转化为在自动化用例</h3>
            <h3>用例模板的命名必须是以下已经支持的用例模板名称：</h3>
            <h3>已支持的用例模板： {{excelNames}}</h3>
            <div style="height: 30px">========================================================</div>
            <form id="myForm" method="post" action="/uploadExcelCase/" enctype="multipart/form-data">
                <div class="leftName">
                    <label for="file">Excel用例模板:</label>
                    <input type="file" id="file" name="file" required>
                </div>
                <div class="leftName">
                    <label for="username" style="width: 200px;margin-top: 15px">Blade登录用户:</label>
                    <input type="text" id="username" name="username" required>
                </div>
                <div class="leftName">
                    <label for="password" style="width: 200px;margin-top: 15px">Blade登录密码:</label>
                    <input type="password" id="password" name="password" required>
                </div>
                <div class="leftName">
                    <label for="project" style="width: 200px;margin-top: 15px">Blade项目名称:</label>
                    <input type="text" id="project" name="project" value="金融反洗钱项目" required>
                </div>
                <div class="leftName">
                    <input type="submit" value="上传用例" style="width: 100px;margin-left: 100px">
                </div>
                <div class="leftName" id="message"><h4>提示信息： {{message}}</h4></h3></div>
            </form>
        </div>
        <div class="float-right">
            <h2>已上传的EXCEL列表：<button id="query" onclick="refreshPage()">刷新</button></h2>
            <ul>
            {% for file in files %}
            <li>
                <a href="/static/{{ file }}">{{ file }}</a>
            </li>
            {% endfor %}
        </ul>
        </div>
    </div>

    <script>
        function refreshPage() {
            location.reload();
        }

        document.getElementById("myForm").addEventListener("submit", function(event){
            // event.preventDefault(); // 阻止表单的默认提交行为
            // 可以在这里添加代码来更新页面内容，例如显示一条消息
            var messageElement = document.getElementById("message");
            messageElement.textContent = "提交，请等待上传完成！时间 > 15s，请求完成后页面会发生跳转！";
        });
    </script>
</body>
<style>
    .leftName {
        width: 800px;
        margin-top: 15px;
        height: 30px;
    }
    .container {
        width: 100%; /* 设置容器的宽度，根据需要调整 */
        overflow: auto; /* 清除浮动影响，确保容器包含浮动元素 */
    }

    .float-left {
        float: left; /* 让div浮动到左侧 */
        width: 50%; /* 设置宽度，根据需要调整 */
        /*background-color: #f2f2f2; !* 仅为示例，添加背景色 *!*/
        margin-top: 50px;
        margin-left: 10%;
    }

    .float-right {
        float: right; /* 让div浮动到右侧 */
        width: 40%; /* 设置宽度，根据需要调整 */
        /*background-color: #e6e6e6; !* 仅为示例，添加背景色 *!*/
        margin-top: 50px;
    }
</style>
</html>